<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="vue-app">
			<!-- 从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：
			 eg：<a v-bind:[attributeName]="url"> ... </a> -->
			<input v-bind:[attr]="type" />
			<input v-bind:[Attr]="type" /><!-- 使用中Attr大写会被转换成小写，编写时需要注意 -->
		</div>
		
		<script type="text/javascript">
			"use strict"
			var attr = "type";
			var Attr = "type";
			var type = "text";
			var id = "inputa";
			var vm = new Vue({
				el: "#vue-app",
				data: {
					attr:attr,
					Attr:Attr,
					id:id,
					type:type,
				},
			})
			
			/* 测试：
				在console控制版面中输入：
				vm.attr="value";
				则界面输入框input中会显示text
			 */
		</script>
	</body>
</html>